<template>
    <div class="box"> 
        <div class="box1">
            <ul>
                <li>
                    <div>特色</div>
                </li>
               <li>
                    <div>品牌</div>
                </li>
               <li>
                    <div>全城</div>
                </li>
            </ul>
        </div>
        <div class="box2" v-for="(item,index) in arr "
        :key="index"
        @click="chinemaXiangqing(item.cinemaId)"
        >
            <div class="box2-timu">{{item.title}} <span>{{item.price.n}}元起</span></div>
            <div class="dizhi">{{item.location}}</div>
            <div class="biao">
                <ul>
                    <li v-for="(itemA,indexA) in item.services"
                    :key="indexA"
                    :class="itemA.code"
                    >
                        <div>{{itemA.text}}</div>
                       
                    </li>
                </ul>
            </div>
             <!-- <div>{{item.discount | add(item.discount)}} </div> -->
             <div class="you" v-if="item.discount.length ==1">
                 <img :src="item.discount[0].card" alt="">
                 {{item.discount[0].text}} </div>
        </div>
        <div class="xxid">
            {{myctsid}}
        </div>
    </div>
</template>
<script>
import {mapState} from"vuex";
export default {
    data(){
        return{
            arr:null
        }
    },
    methods:{
        chinemaXiangqing(a){
        //   this.$router.push({path:"/cinemaXiangqin",query:{id:a}})
    //    this.$router.push({name:'piao',params:{id:a}})

            //  this.$router.push({name:'XiangQing',params:{id:a}})
            this.$router.push("/lunBotu")
          this.$store.commit("yinYuanID",a)

        }
    },
    computed:{
    ...mapState(["mycts","myctsid"])
    },
    filters:{
        // add(a){
        //     if(){}
        // }
    },
    created(){

      let da =  this.axios.get(`https://apis.netstart.cn/maoyan/index/moreCinemas?day=2021-11-12&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=${this.$store.state.myctsid}&lat=23.12&lng=113.35`)
        da.then(re=>{
            console.log(re);
            this.arr =re.data
        })
        console.log(this.$store.state.myctsid);
   }

    
}
</script>
<style lang="less" scoped>
.box{
    padding: 10px 0;
    padding-bottom: 40px;
    .box1{
        font-size: 15px;
        ul{
            display: flex;
            justify-content: space-around;
            li{
                // border: 1px solid red;
                border-right: 1px solid #f0f0f0;
                padding: 0px 0;
                text-align: center;
                &:nth-child(3){
                border-right: 1px solid transparent;

                }
                >div{
                    text-align: center;
                    height: 15px;

                    &::after{
                            content: '';
                           display: inline-block;
                           color: black;
                           width: 100px;
                           box-sizing: border-box;
   
   
                   }
                }
             

            }
        }
    }
    .box2{
        width: 100%;
        box-sizing: border-box;
        font-size: 10px;
        padding: 18px 0px;
        padding-left: 10px;
        border-bottom:1px solid #f0f0f0;
        .box2-timu{
            white-space: nowrap;

            text-overflow: ellipsis;

            overflow: hidden;
            
            font-size: 17px;
            padding-bottom:5px;
            span{
                color: red;
                padding-left: 10px;
            }
        }
        .dizhi{
            color: #666666;
            padding-bottom: 5px;
            font-size: 10px;
        }
        .biao{
            ul{
                width: 88%;
                box-sizing: border-box;
                overflow: hidden;
                white-space: nowrap;
                // display: flex;
                li{
                        border-radius: 3px;

                    // width: 20px;
                    // height: 10px;
                    // background-color: red;
                    margin: 3px;
                    font-size: 10px;
                }
                    .allowRefund{
                        border-radius: 3px;
                        border: 1px solid #589DAF;
                        color: #589DAF;
                        display: inline-block;
                        padding: 2px;
                        text-align: center;
                    }
                    .endorse{
                        border-radius: 3px;
                         border: 1px solid #589DAF;
                        color: #589DAF;
                        display: inline-block;
                        padding: 2px;
                        text-align: center;

                    }
                    .hallType{
                        border-radius: 3px;


                         border: 1px solid #589DAF;
                        color: #589DAF;
                        display: inline-block;
                        padding: 2px;
                        text-align: center;

                    }
                    .snack{
                        border-radius: 3px;

                         border: 1px solid #f90;
                        color: #f90;
                        display: inline-block;
                        padding: 2px;
                        text-align: center;

                    }
                    .vipTag{
                          border: 1px solid #f90;
                        color: #f90;
                        display: inline-block;
                        padding: 2px;
                        text-align: center;

                    }
            }
        }
        .you{
            margin: 10px 0;
            img{
                width: 15px;
                height: 15px;
                vertical-align: middle;
            }
        }

    }
    .xxid{
        font-size: 10px;
        color: #f0f0f0f0;
    }
}
</style>